<script setup lang="ts">
// 表单
import type User from "@/router/back/User";
import { onMounted, reactive, ref } from "vue";
import { useCounterStore } from "@/stores/UserManage/UserManage";
import { Alluser, Detail } from "@/api/Pu/backPu";

// 图片上传引入的
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";
const store = useCounterStore();

// 从store中获取的表格数据
const tableData = store.tableData;
const userDetail = store.userDetail;
const formLabelWidth = "140px";

// 进入页面初始化
onMounted(() => {
  initData();
});

// 用户管理信息获取需要传递的参数
const postCanshu = reactive<any>({
  limit: 10,
  page: 1,
  phone: "",
  username: "",
});

// 初始化发请求获取数据
const initData = () => {
  Alluser(postCanshu).then((resp: any) => {
    console.log(resp.data.data);
    store.tableData = resp.data.data;
     console.log(store.tableData);
  });
};

// 添加弹框状态
const isShow = ref(false);
// 详情弹框状态
const islookShow = ref(false);

// 搜索
const onSubmit = () => {
  // console.log(postCanshu.username);
  // console.log(postCanshu.phone);

  Alluser(postCanshu).then((resp: any) => {
    console.log(resp);
    store.tableData = resp.data.data;
    // store.tableData.splice(0,store.tableData.length)
    //  store.tableData.push(resp.data.data)

  });

};

// 详细
const handleClick = (row: any) => {
  console.log(row);
  // tableData.id=row.id;
  console.log(row.id);

  Detail(row.id).then((resp: any) => {
    console.log(resp.data.data);
  
    store.userDetail.splice(0,store.userDetail.length)
    store.userDetail.push(resp.data.data)
   console.log(store.userDetail);

  });


};

// 图片上传引入的
const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);

  console.log(typeof imageUrl.value);
  AddUserData.image = "images/" + imageUrl.value;
  console.log(AddUserData.image);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const imgUpload=(e:any)=>{
  store.Image.push(e.raw)
  console.log(store.Image);
  
}

// 添加用户数据
const AddUserData = reactive({
  username: "",
  phone: "",
  email: "",
  password: "",
  name: "",
  introduce: "",
  image: "",
  created:null,
  salt:null,
});

// 确定添加用户
// const sure = () => {
//   let fd=new FormData();
//   fd.append("image",store.Image[0])
  
//   AddImg(fd).then((resp)=>{
// console.log(resp);
// if(resp.data.msg=="请求成功"){
//   AddUserData.image =resp.data.data

//    Adduser(AddUserData).then((resp) => {
//     console.log(resp);

//   })
// }

//   })

// };
</script>

<template>
  <div style="width: 80vw; height: 100vh">
    <div class="common-layout">
      <el-container>
        <el-header class="title"> 用户管理 </el-header>
        <el-main>
          <!-- 搜索 -->
          <div class="search">
            <el-form
              :inline="true"
              :model="postCanshu"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-input
                  v-model="postCanshu.username"
                  placeholder="请输入用户账号"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="postCanshu.phone"
                  placeholder="请输入用户电话号码"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="isShow = true"
              >添加用户</el-button
            >
          </div>

          <!--展示数据表格  -->
          <div class="result">
            <!-- <el-table :data="tableData" border style="width: 100%"> -->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="id"
                label="ID"
                width="180"
                align="center"
              />
              <el-table-column
                prop="username"
                label="用户账号"
                width="180"
                align="center"
              />
              <el-table-column
                prop="phone"
                label="电话号码"
                width="180"
                align="center"
              />
              <el-table-column
                prop="email"
                label="用户邮箱"
                width="180"
                align="center"
              />
              <el-table-column
                prop="image"
                label="用户头像"
                width="180"
                align="center"
              >
                <!-- <el-avatar shape="square" :size="80" :fit="fit" src="https://ts1.cn.mm.bing.net/th/id/R-C.44a04163fff09f22c9c948db14f8d35f?rik=aSLwnez5FeZbPQ&riu=http%3a%2f%2fimg.crcz.com%2fallimg%2f202003%2f26%2f1585192258111284.jpg&ehk=LIugC9N9Y1cHtTu6slaWHbg3G0bIckCFrr6qoVnOEKo%3d&risl=&pid=ImgRaw&r=0" /> -->
                <template #default="scope">
                  <el-image
                    :src="scope.row.image"
                    fit="contain"
                    style="width: 100px; height: 100px"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row), (islookShow = true)"
                    >详细</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 添加用户弹框 -->
          <!-- <el-dialog v-model="isShow" title="添加用户">
            <div style="text-align: -webkit-center"> -->
             
              <!-- <el-form
                label-width="100px"
                :model="AddUserData"
                style="max-width: 460px"
                class="addForm"
              > -->
                <!-- 第一排 -->
                <!-- <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="用户名">
                      <el-input
                        v-model="AddUserData.name"
                        placeholder="请输入用户名"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="用户头像"
                      class="photo"
                      v-model="AddUserData.image"
                    >
                      <el-upload
                        class="avatar-uploader"
                        action="http://47.109.30.198:8081/oss/image/image"
                        list-type="picture"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="imgUpload"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"
                          ><Plus
                        /></el-icon>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row> -->
                <!-- 第二排 -->
                <!-- <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="用户账号">
                      <el-input
                        v-model="AddUserData.username"
                        placeholder="请输入用户账号"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="电话号码">
                      <el-input
                        v-model="AddUserData.phone"
                        placeholder="请输入电话号码"
                      />
                    </el-form-item>
                  </el-col>
                </el-row> -->
                <!-- 第三排 -->
                <!-- <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="用户邮箱">
                      <el-input
                        v-model="AddUserData.email"
                        placeholder="请输入用户邮箱"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="密码">
                      <el-input
                        type="date"
                        v-model="AddUserData.password"
                        placeholder="请输入密码"
                        show-password="true"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="介绍">
                  <el-input
                    type="textarea"
                    v-model="AddUserData.introduce"
                    placeholder="请输入用户介绍"
                  />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="sure(), (isShow = false)"
                  >确认添加</el-button
                >
              </span>
            </template>
          </el-dialog> -->

          <!-- 查看详情的弹出框 -->
          <el-dialog v-model="islookShow" title="用户详情">
            <el-row style="margin-left: 30px">
              <el-form
                :model="userDetail[0]"
                style="max-width: 530px"
                label-width="140px"
                class="demo-form-inline"
              >
                <!-- 第一排 -->
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      label="用户头像"
                      :label-width="formLabelWidth"
                      class="photo"
                    >
                      <el-image
                        :src="userDetail[0].image"
                        :size="80"
                        fit="contain"
                        style="width: 100px; height: 100px"
                      ></el-image>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="用户ID " :label-width="formLabelWidth">
                      <el-input
                        v-model="userDetail[0].id"
                        autocomplete="off"
                        disabled
                        width="180px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 第二排 -->
                <el-row :gutter="20" class="Row">
                  <el-col :span="12">
                    <el-form-item
                      label="用户账号 "
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="userDetail[0].username"
                        autocomplete="off"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="用户电话号 "
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="userDetail[0].phone"
                        autocomplete="off"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 第三排 -->
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      label="用户邮箱 "
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="userDetail[0].email"
                        autocomplete="off"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="用户名 " :label-width="formLabelWidth">
                      <el-input
                        v-model="userDetail[0].name"
                        autocomplete="off"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 第四排 -->
                <el-form-item label="用户介绍" :label-width="formLabelWidth">
                  <el-input
                    type="textarea"
                    v-model="userDetail[0].introduce"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-form>
            </el-row>
            <!-- </div> -->
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="islookShow = false"
                  >确认信息</el-button
                >
              </span>
            </template>
          </el-dialog>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.addForm .el-input {
  --el-input-width: 250px !important;
}
.search {
  display: flex;
  justify-content: space-between;
}

.title {
  line-height: 55px;
  box-shadow: -1px 1px 1px 3px #f5f7fa;
}

.el-input__inner {
  width: 80%;
}
/* 头像 */
.photo {
  display: flex;
  justify-items: center;
  align-items: center;
}
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 添加弹出框 */
:deep(.el-dialog__body) {
  padding: 0 !important;
}

/* 头像上传 */
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>

<!-- 头像上传 -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>
